<template>
	<mu-paper :z-depth="1" class="list-wrap">
		<div :style="immerStyle"></div>
		<mu-appbar color="teal">
			管理
			<mu-button icon slot="right">
				<mu-icon value="exit_to_app"></mu-icon>
			</mu-button>
		</mu-appbar>
		<mu-list>
			<mu-sub-header>管理</mu-sub-header>
			<mu-list-item button :ripple="true">
				<mu-list-item-action>
					<mu-icon value="insert_chart"></mu-icon>
				</mu-list-item-action>
				<mu-list-item-title>数据统计</mu-list-item-title>
				<mu-list-item-action>
					<mu-icon value="keyboard_arrow_right"></mu-icon>
				</mu-list-item-action> 
			</mu-list-item>
			<mu-list-item button :ripple="true">
				<mu-list-item-action>
					<mu-icon value="people"></mu-icon>
				</mu-list-item-action>
				<mu-list-item-title>员工管理</mu-list-item-title>
				<mu-list-item-action>
					<mu-icon value="keyboard_arrow_right"></mu-icon>
				</mu-list-item-action> 
			</mu-list-item>
		</mu-list>
		<mu-divider></mu-divider>
		<mu-list>
			<mu-sub-header>系统</mu-sub-header>
			<mu-list-item button :ripple="true">
				<mu-list-item-action>
					<mu-icon value="security"></mu-icon>
				</mu-list-item-action>
				<mu-list-item-title>账号与安全</mu-list-item-title>
				<mu-list-item-action>
					<mu-icon value="keyboard_arrow_right"></mu-icon>
				</mu-list-item-action> 
			</mu-list-item>
			<mu-list-item button :ripple="true">
				<mu-list-item-action>
					<mu-icon value="send"></mu-icon>
				</mu-list-item-action>
				<mu-list-item-title>消息中心</mu-list-item-title>
				<mu-list-item-action>
					<mu-icon value="keyboard_arrow_right"></mu-icon>
				</mu-list-item-action> 
			</mu-list-item>
			<mu-list-item button :ripple="true">
				<mu-list-item-action>
					<mu-icon value="drafts"></mu-icon>
				</mu-list-item-action>
				<mu-list-item-title>意见反馈</mu-list-item-title>
				<mu-list-item-action>
					<mu-icon value="keyboard_arrow_right"></mu-icon>
				</mu-list-item-action> 
			</mu-list-item>
		</mu-list>
	</mu-paper>
</template>

<script>
	import { immersed } from "@/utils/immersed.js";
	import Vue from "vue";
	import { request } from "@/utils/request";
	import MuseUI from 'muse-ui';
	import 'muse-ui/dist/muse-ui.css';
	import '@/assets/muse/MaterialIcons-Regular.css';

	Vue.use(MuseUI);

	export default {
		data() {
			return {
				immerStyle: {
					width: '100%',
					height: window.immersed + 'px',
					backgroundColor: 'rgb(0, 150, 136)'
				}
			}
		},
		methods: {}
	};
</script>

<style lang="less">
	.list-wrap {
		width: 100%;
		height: 100%;
	}
	
	.mu-appbar {
		width: 100%;
		height: 52px;
	}
</style>